<template>
    <div style="background: linear-gradient(#f5f5f5, #E0FFFF);">
        <el-row>
            <el-col :span="8"><div id="course" style="height:250px;" /></el-col>
            <el-col :span="8"><div id="income" style="height:250px;" /></el-col>
            <el-col :span="8"><div id="student" style="height:250px;" /></el-col>
        </el-row>
    </div>
</template>
<script>
import countApi from '@/api/count' // 导入接口模块，用于获取数据
import echarts from 'echarts'
export default {
    name: 'PercentMap',
    data() {
        return {
        }
    },
    mounted() {
        countApi.percent().then(res => {
            const { studentAll, studentFinish, courseAll, courseFinish, incomeAll, incomeFinish } = res.data
            this.initChart(studentAll, studentFinish, courseAll, courseFinish, incomeAll, incomeFinish)
        })
        // this.initChart()
    },
    methods: {
        initChart(studentAll, studentFinish, courseAll, courseFinish, incomeAll, incomeFinish) {
            // 假设引入的 echarts 变量名无误，此处保持代码不变
            const courseChart = echarts.init(document.getElementById('course'))
            const incomeChart = echarts.init(document.getElementById('income'))
            const studentChart = echarts.init(document.getElementById('student'))
            courseChart.setOption(this.getConfigOptions('收入', [{ value: incomeFinish, name: '已核销' }, { value: incomeAll, name: '总收入' }]))
            studentChart.setOption(this.getConfigOptions('课时', [{ value: courseFinish, name: '已销课时' }, { value: courseAll, name: '总课时' }]))
            incomeChart.setOption(this.getConfigOptions('学生', [{ value: studentFinish, name: '毕业学生' }, { value: studentAll, name: '总学生' }]))
        },
        getConfigOptions(title, data) {
            return {
                // 提示框配置
                tooltip: {
                    trigger: 'item' // 触发类型，item表示数据项图形触发
                },
                // 图例配置
                legend: {
                    top: '3%', // 距离容器顶部5%
                    left: 'center' // 水平居中
                },
                title: {
                    text: title, // 标题文本
                    bottom: '2%', // 距离容器顶部20%
                    left: 'center' // 水平居中
                },
                // 系列列表
                series: [{
                    // name: '销售占比图', // 系列名称
                    type: 'pie', // 图表类型为饼图
                    radius: ['40%', '70%'], // 饼图半径[内半径,外半径]，形成环形效果
                    avoidLabelOverlap: false, // 允许标签重叠
                    itemStyle: { // 图形样式
                        borderRadius: 10, // 扇形圆角
                        borderColor: '#fff', // 边框颜色
                        borderWidth: 2, // 边框宽度
                        color: function(params) {
                            // 按索引返回预设颜色
                            const colorList = ['orange', '#34bfa3', '#fac858']
                            return colorList[params.dataIndex]
                        }
                    },
                    label: { // 标签配置
                        show: true, // 默认不显示标签
                        position: 'inside', // 标签位置
                        fontSize: 14,
                        color: '#444',
                        formatter: '{b}[{c}]' // 标签显示内容
                    },
                    // 高亮状态下的样式
                    emphasis: {
                        label: {
                            show: true, // 高亮时显示标签
                            fontSize: 40, // 标签字体大小
                            fontWeight: 'bold' // 标签字体粗细
                        }
                    },
                    // 标签引导线配置
                    labelLine: {
                        show: false // 不显示引导线
                    },
                    // 数据数组 // 数据项（值+名称）
                    data: data // [{ value: 1048, name: '已销金额' }, { value: 735, name: '未销金额' }]
                }]
            }
        }
    }
}
</script>
